<template>
  <div class="video-container">
    <div class="video-section">
      <!-- 视频播放器 -->
      <div class="player-wrapper">
        <div id="ezuikit-player"></div>
        <div class="device-info">
          <span>设备序列号: {{ deviceSerial }}</span>
          <div class="status-tag" :class="{ 'online': isOnline }">
            {{ isOnline ? '在线' : '离线' }}
          </div>
        </div>
      </div>
      
      <!-- 控制按钮 -->
      <div class="control-buttons">
        <el-button-group>
          <el-button type="primary" size="small" @click="capture">
            <i class="el-icon-camera-solid"></i>
            抓拍
          </el-button>
          <el-button type="primary" size="small" @click="switchQuality">
            <i class="el-icon-video-camera"></i>
            {{ isHD ? '高清' : '标清' }}
          </el-button>
        </el-button-group>
      </div>
    </div>
    
    <!-- 抓拍记录 -->
    <div class="captures-section">
      <camera-captures 
        :device-serial="deviceSerial"
        :is-online="isOnline"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import CameraCaptures from './CameraCaptures.vue'

const deviceSerial = ref('AB9831171')
const isOnline = ref(true)
const isHD = ref(true)
const accessToken = 'at.1234567890' // 这里需要替换为实际的token
let player = null

const initPlayer = () => {
  const tryInit = () => {
    if (typeof EZUIKit === 'undefined') {
      setTimeout(tryInit, 1000)  // 每秒重试一次
      return
    }

    try {
      player = new EZUIKit.EZUIKitPlayer({
        id: 'video-player',
        url: `ezopen://open.ys7.com/${deviceSerial.value}/1.hd.live`,
        accessToken: accessToken,
        template: 'simple',
        autoplay: true,
        handleError: (e) => {
          console.error('播放器错误:', e)
          isOnline.value = false
          ElMessage.error('视频加载失败，请检查设备状态')
        }
      })
    } catch (error) {
      console.error('播放器初始化失败:', error)
      isOnline.value = false
      ElMessage.error('播放器初始化失败')
    }
  }

  tryInit()
}

const switchQuality = () => {
  isHD.value = !isHD.value
  if (player) {
    const quality = isHD.value ? 'hd' : 'sd'
    player.stop()
    player.url = `ezopen://open.ys7.com/${deviceSerial.value}/1.${quality}.live`
    player.play()
  }
}

const capture = async () => {
  try {
    if (player) {
      ElMessage.info('正在抓拍...')
      // 调用抓拍API
      const response = await fetch('https://open.ys7.com/api/lapp/device/capture', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `accessToken=${accessToken}&deviceSerial=${deviceSerial.value}&channelNo=1`
      })
      const data = await response.json()
      if (data.code === '200') {
        ElMessage.success('抓拍成功')
      } else {
        throw new Error(data.msg || '抓拍失败')
      }
    }
  } catch (error) {
    console.error('抓拍失败:', error)
    ElMessage.error('抓拍失败: ' + error.message)
  }
}

onMounted(() => {
  initPlayer()
})

onUnmounted(() => {
  if (player) {
    player.stop()
    player = null
  }
})
</script>

<style scoped>
.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.video-section {
  height: 70%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.captures-section {
  height: 30%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.player-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

#ezuikit-player {
  flex: 1;
  min-height: 0;
  background: #000;
}

.device-info {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
}

.status-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
}

.status-tag.online {
  background: #67c23a;
  color: #fff;
}

.status-tag.离线 {
  background: #f56c6c;
  color: #fff;
}

.control-buttons {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

:deep(.el-button-group) {
  display: flex;
  gap: 1px;
}

:deep(.el-button) {
  display: flex;
  align-items: center;
  gap: 5px;
}

:deep(.el-icon) {
  font-size: 16px;
}
</style> 